/**
 * 自定义InputNumber组件
 */
import React from 'react';
import PropTypes from 'prop-types';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { InputNumber, Tooltip } from 'antd';
import { FormItemLayout, NoLableLayout } from '../formPub';
import styles from './style.less';
import Inputnumber from './inputnumber';

class InputNumberC extends React.PureComponent {
  static defaultProps = {
    title: '',
    initialValue: '',
    helper: '',
    onChange: () => {},
    onBlur: () => {},
    formItemLayout: FormItemLayout,
    NoLableLayout: NoLableLayout,
    disabled: false,
    unit: undefined, // 默认无单位
    unitNum: 1, // 默认有单位时，单位字数为1
    onRef: () => {}, // 本组件的引用
    splitStyle: false, // 默认不按千分位展示
    precision: undefined, // 默认精度为不保留小数位
    labalWrap: false, //默认title不换行
    formatter: undefined, // 默认用内部的formatter
    parser: undefined, // 默认用内部的parser
    addClassName: false,
  };

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);
  }

  // 非初始化状态下更改下拉选项(供父组件调用)
  setNumber = (number) => {
    const valueF = {};
    valueF[this.props.dataIndex] = number;
    this.props.form.setFieldsValue(valueF);
  };

  render() {
    const {
      addClassName,
      NoLableLayout,
      styleRow,
      form,
      onBlur,
      title,
      step,
      dataIndex,
      initialValue,
      onChange,
      min,
      max,
      disabled,
      helper,
      prefix = '',
      formItemLayout,
      unit,
      rules,
      precision,
      splitStyle,
      labalWrap,
      parser,
      formatter,
    } = this.props;
    const { getFieldDecorator } = form;

    return (
      <Form.Item
        className={labalWrap ? `${styles.inputNumberCForWrap}` : addClassName ? `${styles.inputNumberCAdd}` : `${styles.inputNumberC}`}
        labelCol={title ? formItemLayout.labelCol : NoLableLayout.labelCol}
        wrapperCol={title ? formItemLayout.wrapperCol : NoLableLayout.wrapperCol}
        label={
          title ? (
            helper ? (
              <span>
                {title}&nbsp;
                <Tooltip title={helper}>
                  <QuestionCircleOutlined />
                </Tooltip>
              </span>
            ) : (
              <span>{title}</span>
            )
          ) : undefined
        }
      >
        {getFieldDecorator(dataIndex, {
          initialValue,
          rules: !!rules ? rules : [],
        })(
          <Inputnumber
            id={dataIndex}
            min={min}
            max={max}
            precision={precision}
            onChange={onChange}
            onBlur={onBlur}
            step={step}
            placeholder={this.props.placeholder}
            formatter={formatter}
            parser={parser}
            disabled={disabled}
            styleRow={styleRow}
            unit={unit}
            prefix={prefix}
            splitStyle={splitStyle}
          />,
        )}
      </Form.Item>
    );
  }
}

// props类型
InputNumberC.propsTypes = {
  form: PropTypes.object, // form对象
  title: PropTypes.string, // 显示名称
  dataIndex: PropTypes.string, // Form识别的Item ID
  initialValue: PropTypes.string, // 初始默认值
  labalWrap: PropTypes.bool, // 支持标题换行
  onChange: PropTypes.func, // 输入框内容变化时的回调
  helper: PropTypes.oneOfType([
    // 提示帮助信息
    PropTypes.string,
    PropTypes.element,
  ]),
  prefix: PropTypes.element, // input前缀图标
  splitStyle: PropTypes.bool, // 是否按千分位展示
  rules: PropTypes.array, // 校验规则
  formItemLayout: PropTypes.object, // 布局
  disabled: PropTypes.bool, // 禁用
  unit: PropTypes.string, // 单位
  unitNum: PropTypes.number, // 单位的个数（默认是1，当个数超过1个时，该参数必填）
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
  formatter: PropTypes.func, // 指定输入框展示值的格式
  parser: PropTypes.func, // 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用
};

export default InputNumberC;
